{% extends 'work-layout.html' %}
{% block form-index %}nav-link{% endblock %}
{% block form-show %}show{% endblock %}
{% block form-index-unary %}active{% endblock %}
{% block body %}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<main id="main" class="main">

  {% if error %}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var errorMessages = [{% for item in error %}'{{item}}'{% if not forloop.last %},{% endif %}{% endfor %}];
      alert(errorMessages.join('\n'));
    });
  </script>
  {% endif %}

  <div class="pagetitle">
    <h1>PHQ-9抑郁症筛查量表</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'work-index' %}">主页</a></li>
        <li class="breadcrumb-item">工具箱</li>
        <li class="breadcrumb-item active">问卷填写</li>
      </ol>
    </nav>
  </div>

  <section class="section">
    <div class="row">
      <div class="col-lg-3"></div>
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">问卷填写</h5>

            <form class="row g-3" method="post" id="surveyForm">
              {% csrf_token %}

              <!-- 基本信息 -->
              <div class="col-md-6">
                <label class="form-label">id</label>
                <input type="number" class="form-control" name="name" required>
              </div>
              <div class="col-md-6"></div>

              <div class="col-md-6">
                <label class="form-label">年龄</label>
                <input type="number" class="form-control" name="age" required>
              </div>
              <div class="col-md-6"></div>

              <div class="col-md-6">
                <label class="form-label">性别</label>
                <select class="form-select" name="gender" required>
                  <option value="">请选择</option>
                  <option value="M">男性</option>
                  <option value="F">女性</option>
                  <option value="S">隐私</option>
                </select>
              </div>
              <div class="col-md-6"></div>

              <!-- 地理位置 -->
              <div class="col-md-6">
                <label class="form-label">所在省份</label>
                <select class="form-select" id="inputProvince" name="province" required>
                  <option value="">请选择</option>
                  {% for code, name in province %}
                  <option value="{{code}}">{{name}}</option>
                  {% endfor %}
                </select>
              </div><div class="col-md-6"></div>

              <div class="col-md-6">
                <label class="form-label">所在城市</label>
                <select class="form-select" id="inputCity" name="city" required>
                  <option value="">请先选择省份</option>
                </select>
              </div><div class="col-md-6"></div>

             {% for item in questions %}
                <div class="col-12 mb-4">  <!-- 增加下边距分隔问题 -->

                      <h5 class="card-title  mb-3">  <!-- 突出问题文本 -->
                        <i class="bi bi-box2-heart"></i> <!-- 添加图标 -->
                        {{ forloop.counter }}. {{ item.question }}
                      </h5>

                      <div class="d-flex flex-column gap-2">  <!-- 垂直排列选项 -->
                        {% for i in item.options %}
                        <div class="form-control d-flex align-items-center ps-3">  <!-- 增强可点击区域 -->
                          <input
                            type="radio"
                            class="btn-check"
                            name="question{{item.number}}"
                            id="{{ i.value }}+{{item.number}}"
                            value="{{i.value}}"
                            required>
                          <label
                            class="btn  w-100 text-start"
                            for="{{ i.value }}+{{item.number}}"><!-- 宽度填满 -->
                            <span class="badge bg-primary me-2">{{ forloop.counter }}</span>  <!-- 选项编号 -->
                            {{ i.text }}
                          </label>
                        </div>
                        {% endfor %}
                      </div>


                </div>
            {% endfor %}

              <!-- 提交部分 -->
              <div class="col-12">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="agreeCheck" required>
                  <label class="form-check-label" for="agreeCheck">
                    我已阅读并同意《隐私协议》
                  </label>
                </div>
              </div>

              <div class="text-center">
                <button type="submit" class="btn btn-primary">提交问卷</button>
                <button type="reset" class="btn btn-secondary">重新填写</button>
              </div>
            </form>

            <script>
              $(document).ready(function() {
                $('#inputProvince').change(function() {
                  var province_id = $(this).val();
                  $.ajax({
                    url: '{% url "selectProvince" %}',
                    type: 'POST',
                    data: {
                        'province_id':province_id,
                    },
                    success: function(data) {
                        $('#inputCity').empty();
                        $('#inputCity').append('<option value="...">...</option>');
                        $.each(data.cityLog, function(key, city) {
                            $('#inputCity').append('<option value="' + city + '">' + city + '</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error("Error: " + error);
                    }
                });
                });
              });
            </script>

          </div>
        </div>
      </div>
      <div class="col-lg-3"></div>
    </div>
  </section>
</main>
{% endblock %}